<script setup lang="ts">
  import { ref, computed } from 'vue';
  import { Statistic, Avatar, Image } from '@arco-design/web-vue';
  import IconCard1 from '/@/assets/home/card1.svg';
  import IconCard2 from '/@/assets/home/card2.svg';
  import IconCard3 from '/@/assets/home/card3.svg';
  import ImageEventBg from '/@/assets/home/event_bg.png';
  import IconCalendar from '/@/assets/home/calendar.svg';
  import IconStar1 from '/@/assets/home/star1.svg';
  import IconStar2 from '/@/assets/home/star2.svg';
  import IconStar3 from '/@/assets/home/star3.svg';
  import IconStar4 from '/@/assets/home/star4.svg';
  import IconStar5 from '/@/assets/home/star5.svg';
  import ImageTrackLeft from '/@/assets/home/track_left.png';
  import ImageTrackRight from '/@/assets/home/track_right.png';
  import IconLike from '/@/assets/home/like.svg';
  import IconCommunityTag from '/@/assets/home/community_tag.svg';
  import ImageProfileCardBg from '/@/assets/home/profile_card_bg.png';
  import ImageProfileCardBgSmall from '/@/assets/home/profile_card_bg_small.png';
  import HomePins from './HomePins.vue';
  import {
    queryHomeArticleList,
    queryHomeCommunityList,
    queryHomeActivityList,
    // queryHomeStatisticInfo,
  } from '/@/api/home';
  import type {
    ArticleRecord,
    CommunityRecord,
    ActivityRecord,
    StatisticInfo,
  } from '/@/api/model/homeModel';
  import HomeCard from './components/HomeCard.vue';
  import HomeSwiper from './components/HomeSwiper.vue';
  import { formatTime } from '/@/utils/day';
  import HomeCreators from './HomeCreators.vue';

  // ====== 文章推荐 ======
  const articleListRef = ref<ArticleRecord[]>([]);
  (async () => {
    const data = await queryHomeArticleList();
    articleListRef.value = data;
  })();

  // ====== 社区 ======
  const communityListRef = ref<CommunityRecord[]>([]);
  (async () => {
    const data = await queryHomeCommunityList();
    communityListRef.value = data;
  })();

  // ====== 统计 ======
  const statisticInfo = ref<StatisticInfo>({
    creatorNum: 13310,
    projectNum: 331,
    groupNum: 50,
    prNum: 12,
  });
  // (async () => {
  //   const data = await queryHomeStatisticInfo();
  //   statisticInfo.value = data;
  // })();
  const statisticList = computed(() => [
    { label: '创作者', value: statisticInfo.value?.creatorNum || 0 },
    { label: '项目方', value: statisticInfo.value?.projectNum || 0 },
    { label: '社区', value: statisticInfo.value?.groupNum || 0 },
    { label: 'PR持有者', value: statisticInfo.value?.prNum || 0 },
  ]);

  // ======= 最新活动 =======
  const eventListRef = ref<ActivityRecord[]>([]);
  (async () => {
    const data = await queryHomeActivityList();
    eventListRef.value = data;
  })();
</script>

<template>
  <div class="home-root relative -mt-[80px]">
    <div class="relative">
      <div class="group-bg-2 h-full"></div>
      <div class="group-bg-1"></div>
      <div class="sm:grid sm:grid-cols-3 z-20 relative">
        <div class="absolute right-0 top-[318px] z-10"><img :src="IconStar3" /></div>
        <div class="relative z-10">
          <div class="absolute left-[180px] top-[159px] w-[584px] h-[198px]">
            <div class="absolute left-[380px] -bottom-[9px] z-20"><img :src="IconStar4" /></div>
            <div class="absolute left-[258px] -top-[13px] z-20"><img :src="IconStar5" /></div>
            <div class="absolute left-0 top-0 z-10"><img :src="ImageTrackLeft" /></div>
            <div class="absolute left-0 top-0 z-10"><img :src="ImageTrackRight" /></div>
          </div>
          <div class="absolute left-[146px] top-[141px] z-10"><img :src="IconStar1" /></div>
          <div class="absolute left-[143px] top-[603px] z-10"><img :src="IconStar2" /></div>
          <div class="absolute left-[162px] top-[357px] z-30 w-[240px]">
            <img class="overlay relative z-10" :src="IconCard1" />
            <img class="absolute left-0 top-0 opacity-[0.7]" :src="ImageProfileCardBg" />
          </div>
          <div class="absolute left-[70px] top-[247px] z-20 w-[240px]">
            <img class="overlay relative z-10" :src="IconCard2" />
            <img class="absolute left-0 top-0 opacity-[0.7]" :src="ImageProfileCardBg" />
          </div>
          <div class="absolute left-[165px] top-[181px] z-10 w-[200px]">
            <img class="overlay relative z-10" :src="IconCard3" />
            <img class="absolute left-0 top-0 opacity-[0.7]" :src="ImageProfileCardBgSmall" />
          </div>
        </div>
        <div class="relative z-10 col-span-2 px-28 pt-[197px] pb-[76px]">
          <div class="text-[36px] mb-[8px] leading-[70px]"
            ><b
              class="text-6xl font-bold mr-[10px] bg-clip-text text-transparent bg-gradient-to-t from-[#1255FF] to-[#CB97FF]"
              >极星</b
            >致力于连接人与信息,让优质丰富的信息得到高效精准的分发。</div
          >
          <div class="text-[18px] mb-[25px]"
            >使用Filecoin的去中心化存储方案，确保数据归还给用户，实现真正的数据所有权。</div
          >
          <div class="mb-[25px] space-x-[32px]">
            <button
              class="w-[220px] h-[60px] bg-white rounded-[8px] shadow-[4px_4px_20px_rgba(0,0,0,0.25)] text-black text-[20px]"
              >探索社区</button
            >
            <button
              class="w-[220px] h-[60px] bg-[#5F70FF] rounded-[8px] shadow-[4px_4px_20px_rgba(0,0,0,0.25)] text-white text-[20px]"
              >入驻社区</button
            >
          </div>
          <div class="flex flex-wrap">
            <div
              class="flex-none w-1/2 font-medium"
              v-for="item in statisticList"
              :key="item.label"
            >
              <Statistic
                :value="item.value"
                :extra="item.label"
                :value-from="0"
                :show-group-separator="true"
                animation
              />
            </div>
          </div>
        </div>
      </div>
      <div class="bg-group relative">
        <div class="group-bg-3"></div>
        <HomePins />
        <HomeCard title="文章推荐" more="/article">
          <HomeSwiper
            scrollbarOuterClass="sm:mx-32 mb-8"
            scrollbarClass="h-[315px] flex flex-nowrap space-x-4"
          >
            <a
              v-for="item in articleListRef"
              :key="item.id"
              class="w-[220px] flex-none rounded-lg overflow-hidden relative shadow"
              :href="`/post/${item.id}`"
              target="_blank"
            >
              <Image height="100%" width="100%" :src="item.cover" fit="cover" />
              <div
                class="absolute bottom-0 w-full h-[100px] bg-[#8fb2fa]/[0.5] p-3 backdrop-filter-blur"
              >
                <div class="whitespace-normal text-white font-bold leading-lg">{{
                  item.title
                }}</div>
              </div>
            </a>
          </HomeSwiper>
        </HomeCard>
      </div>
    </div>
    <HomeCreators />
    <HomeCard
      title="最新活动"
      more="/events"
      class="h-[646px] bg-gradient-to-t from-[#93adff] to-[#fff]"
    >
      <img
        v-show="ImageEventBg"
        class="absolute top-0 left-[227px] w-[927px] h-[558px]"
        :src="ImageEventBg"
      />
      <HomeSwiper
        scrollbarOuterClass="sm:mx-32 mb-8 pt-[40px]"
        scrollbarClass="h-[320px] flex flex-nowrap space-x-4"
      >
        <a
          v-for="item in eventListRef"
          :key="item.id"
          class="w-[280px] flex-none relative shadow"
          :href="`/activity/${item.id}`"
          target="_blank"
        >
          <div
            class="backdrop-filter-blur h-full border-2 px-[6px] py-[10px] border-white bg-[#dbdbdb]/[0.4] rounded-lg"
          >
            <div class="h-[180px] w-full rounded-lg overflow-hidden">
              <Image height="100%" width="100%" :src="item.cover" />
            </div>
            <div class="flex mt-3">
              <Avatar class="flex-none" :imageUrl="item.community_logo" />
              <div
                class="ml-3 whitespace-normal text-black font-bold text-[16px] h-[48px] pole-line-clamp-2"
                >{{ item.name }}</div
              >
            </div>
            <div
              class="mt-5 bg-white/[0.5] rounded-lg h-9 pl-[48px] flex items-center justify-left text-sm text-black"
            >
              <img class="mr-[20px] w-[20px] h-[18px]" :src="IconCalendar" />
              {{ formatTime(item.time) }}
            </div>
          </div>
        </a>
      </HomeSwiper>
    </HomeCard>
    <div class="bg-[#E9ECED] pt-[90px]">
      <div class="w-[1300px] mx-auto">
        <div
          class="sm:mb-[55px] flex items-center justify-center space-x-6 text-white text-2xl font-bold"
        >
          <div
            class="w-40 h-10 bg-black/[0.2] flex justify-center items-center cursor-pointer relative"
            :class="{ '!bg-black/[0.8]': true }"
          >
            <span>推荐社区</span>
            <img class="absolute w-[22px] left-0 -top-[32px]" :src="IconLike" />
            <div class="absolute h-[2px] bg-black/[0.8] -bottom-[7px] w-full"></div>
          </div>
          <a
            href="clubs"
            target="_blank"
            class="w-40 h-10 bg-black/[0.2] flex justify-center items-center cursor-pointer"
            >全部社区</a
          >
        </div>
        <div class="pb-14 flex flex-wrap">
          <div
            v-for="item in communityListRef"
            :key="item.name"
            class="relative [&:nth-child(9n-3)]:!ml-[122px] ml-[34px] w-[210px] h-[80px] px-3 py-4 flex items-center bg-black/[0.2] [&:nth-child(18n-1)]:bg-[#5F70FF] [&:nth-child(18n-3)]:bg-[#5F70FF] [&:nth-child(18n-4)]:bg-[#5F70FF] [&:nth-child(18n-6)]:bg-[#5F70FF] [&:nth-child(18n-8)]:bg-[#5F70FF] [&:nth-child(18n-9)]:bg-[#5F70FF] [&:nth-child(18n-11)]:bg-[#5F70FF] [&:nth-child(18n-14)]:bg-[#5F70FF] [&:nth-child(18n-16)]:bg-[#5F70FF]"
          >
            <div class="mr-3"><Avatar :imageUrl="item.logo" /></div>
            <div>
              <div class="font-bold text-black/[0.8]">{{ item.name }}</div>
              <div>{{ item.focus_num || 0 }} 粉丝</div>
            </div>
            <img
              class="w-[20px] h-[20px] absolute right-[12px] top-[18px]"
              :src="IconCommunityTag"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .home-root :deep(.arco-statistic-content .arco-statistic-value) {
    font-weight: 700;
  }

  .pole-shadow {
    box-shadow: 0px 4px 20px 0px #00000040;
  }

  .overlay {
    mix-blend-mode: overlay;
  }

  .backdrop-filter-blur {
    backdrop-filter: blur(20px);
  }

  .home-root {
    /* background: radial-gradient(75.82% 75.82% at 39.55% 32.95%, #8cb2f9 0%, #eeeffa 100%);
    background: conic-gradient(from 180deg at 32.71% 32.74%, #8cb2f9 0deg, #eeeffa 360deg); */
  }

  .group-bg-1 {
    position: absolute;
    width: 100%;
    height: 730px;
    left: 0px;
    top: 0px;
    background: radial-gradient(75.82% 75.82% at 39.55% 32.95%, #8cb2f9 0%, #eeeffa 100%)
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    mix-blend-mode: hue;
    z-index: 2;
  }

  .group-bg-3 {
    position: absolute;
    width: 100%;
    height: 808px;
    left: 0px;
    top: 0;
    background: radial-gradient(75.82% 75.82% at 39.55% 32.95%, #8cb2f9 0%, #eeeffa 100%)
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    mix-blend-mode: hue;
    transform: matrix(1, 0, 0, -1, 0, 0);
  }

  .group-bg-2 {
    position: absolute;
    width: 100%;
    height: 730px;
    left: 0px;
    top: 0px;
    background: conic-gradient(from 180deg at 32.71% 32.74%, #8cb2f9 0deg, #eeeffa 360deg);
  }
</style>
